<template>
  <div id="PlaylistDetail">
    <div class="content">
      <div class="title">
        <!--   歌单图片    -->
        <div class="title_imgbox">
          <el-image :src="`${playlist.coverImgUrl}?param=200y200`" style="width: 200px; height: 200px"/>
        </div>
        <!--   歌单名和介绍     -->
        <div class="title_info">
          <h3>{{ playlist.name }}</h3>
          <div class="creator" v-if="playlist.creator">
            <el-image :src="`${playlist.creator.avatarUrl}?param=35y35`"
                      style="width: 35px; height: 35px;margin-right: 6px;" lazy/>
            <span><a>{{ playlist.creator.nickname }}</a></span>
            <span>{{ listCreateTime }} 创建</span>
          </div>
          <div style="display: flex">
            <el-button type="primary" icon="el-icon-video-play" size="small" @click="changeMusiclist">播放</el-button>
            <el-button icon="el-icon-folder-add" size="small">({{ playlist.subscribedCount }})</el-button>
            <el-button icon="el-icon-share" size="small">({{ playlist.shareCount }})</el-button>
            <el-button icon="el-icon-download" size="small"></el-button>
            <el-button icon="el-icon-chat-line-square" size="small">({{ playlist.commentCount }})</el-button>
          </div>
          <div>
            <span>标签：</span>
            <el-tag v-for="(tag, index) in playlist.tags" :key="index" size="small" style="margin-left:5px">{{ tag }}
            </el-tag>
          </div>
          <div class="dept">
            <span>介绍：</span>
            <template>
              <p v-for="(d,index) in description" :key="d+index">
                <template v-if="index<num">
                  {{ d }}
                </template>
              </p>
            </template>
          </div>
          <div v-if="description.length > 3">
            <el-button type="text" @click.native="num=99" v-if="num===2">展开</el-button>
            <el-button type="text" @click.native="num=2" v-else>收起</el-button>
          </div>
        </div>
      </div>

      <SongList
        title="歌曲列表"
        :songNum="playlist.trackCount"
        :playCount="playlist.playCount"
        :songs="playlist.tracks"
      />

      <div v-if="playlist.id">
        <Comment :id="playlist.id" :type="2"/>
      </div>
    </div>

    <div class="left_wrap">
      <div class="likeThisList">
        <h4>喜欢这个歌单的人</h4>
        <div class="piclist">
          <a v-for="item in playlist.subscribers" :title="item.nickname" :key="item.userId">
            <el-image :src="`${item.avatarUrl}?param=40y40`">
            </el-image>
          </a>
        </div>
      </div>

      <div class="hotlist">
        <h4>热门歌单</h4>
        <ul>
          <li v-for="item in hotlist" :key="item.id" @click="toPlaylistDetail(item.id,item.name)">
            <div style="width: 50px;flex-shrink: 0">
              <el-image :src="`${item.coverImgUrl}?param=50y50`"/>
            </div>
            <div>
              <h3 style="font-size: 14px;">{{ item.name }}</h3>
              <p>by {{ item.creator.nickname }}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import {playlistDetail} from "@/api";
// 引入dayjs格式化时间
import dayjs from "dayjs";
import {playList} from '@/api';

export default {
  name: "PlaylistDetail",
  data() {
    return {
      playlist: {},
      num: 2, // 歌单介绍的默认显示行数
      hotlist: []
    };
  },
  mounted() {
    this.getData();
  },
  computed: {
    listCreateTime() {
      return dayjs(this.playlist.createTime).format("YYYY-MM-DD");
    },
    description() {
      // 处理歌单介绍换行
      return (this.playlist.description || "").split(/\n/g);
    },
  },
  methods: {
    getData() {
      // 获取歌单详细数据
      playlistDetail(this.$route.query.id).then((res) => {
        if (res.data.code === 200) {
          this.playlist = res.data.playlist;
        }
      });
      // 获取5个热门歌单
      playList({limit: 5}).then((res) => {
        if (res.data.code === 200) {
          this.hotlist = res.data.playlists;
        }
      })
    },
    changeMusiclist() {
      this.$bus.$emit("changeMusiclist", this.playlist.tracks)
    },
    // 跳转到歌单详情页
    toPlaylistDetail(id, name) {
      this.$router.push({
        path: "/playlistDetail",
        query: {
          id: id,
          title: name
        }
      })
    }
  },
  watch: {
    "$route"() {
      this.getData();
    }
  }
};
</script>

<style lang="less" scoped>
#PlaylistDetail {
  display: flex;
  flex-flow: row nowrap;
  width: 1020px;
  margin: 0 auto;
  background-color: #fff;

  .content {
    width: 740px;
    padding: 40px;
    display: flex;
    flex-flow: column nowrap;
    border: 1px solid #eeeeee;

    .title {
      width: 100%;
      height: auto;
      display: flex;
      flex-flow: row nowrap;
      margin-bottom: 20px;

      .title_imgbox {
        width: 208px;
        height: 208px;
        border: 1px solid rgb(180, 179, 179);
        padding: 3px;
      }

      .title_info {
        width: 100%;
        margin-left: 35px;
        display: flex;
        flex-flow: column nowrap;

        h3 {
          font-weight: normal;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }

        .creator {
          margin: 5px 0;
          display: flex;
          justify-content: start;
          align-items: center;

          span {
            margin-right: 5px;
            font-size: 12px;
            color: #999999;

            a {
              color: #0c73c2;
            }
          }
        }

        .dept {
          overflow: hidden;
        }

        div span,
        div p {
          color: #666666;
          font-size: 13px;
        }
      }

      .title_info > div {
        margin: 5px 0;
      }
    }
  }

  .left_wrap {
    flex: 1;
    padding: 30px;
    width: 280px;

    h4 {
      border-bottom: 1px solid #999999;
      padding-bottom: 5px;
    }

    .likeThisList {
      display: flex;
      flex-flow: column nowrap;

      .piclist {
        display: flex;
        flex-flow: row wrap;

        a {
          flex: 25%;
          margin: 10px 0;
        }
      }

    }

    .hotlist {
      width: 100%;

      ul li {
        display: flex;
        flex-flow: row nowrap;
        justify-content: start;
        cursor: pointer;

        div {
          /*第一步： 溢出隐藏 */
          overflow: hidden;
          /* 第二步：让文本不会换行， 在同一行继续 */
          white-space: nowrap;
          /* 第三步：用省略号来代表未显示完的文本 */
          text-overflow: ellipsis;
          margin: 3px;
        }

        p {
          font-size: 12px;
        }
      }
    }
  }
}
</style>
